/**
 * Created by mapbar_front on 2019/8/10.
 */
import React,{Component} from 'react';

class CustomerTextInput extends Component{
    constructor(props){
        super(props);
        this.ref = React.createRef();
    }
    focusTextInput=()=>{
        //console.log('focusTextInput');
        this.ref.current.focus();
    }
    render(){
        return(
            <div>
                <input type="text" value="input1" ref={this.ref}/>
                <input type="text" value="input2" onClick={this.focusTextInput}/>
            </div>
        )
    }
}
function MyFunctionComponent(){
    return <input type="text"/>
}

function MyInput(){
    const ref = React.createRef();
    function handleClick(){
        ref.current.focus();
    }
    return  <div>
                <input type="text" ref={ref}/>
                <input type="text" onClick={handleClick}/>
            </div>
}
class RefsDom1 extends Component{
    constructor(props){
        super(props);
        this.textInput = React.createRef();
        this.myRef = React.createRef();
    }
    componentDidMount(){
        //console.log('componentDidMount',this.textInput.current);
        this.textInput.current.focusTextInput();
        console.log('this.myRef',this.myRef.current);
    }
    render(){
        return(
            <div>
                <CustomerTextInput ref={this.textInput}/>
                <MyFunctionComponent ref={this.myRef}/>
                <MyInput/>
            </div>
        )
    }
}
export default RefsDom1;


